var FlipButton = Backbone.View.extend({
	tagName : 'div',
	initialize : function() {
		this.def.bw = this.def.h / 2;//(this.def.h - 4) / 2;
		this.render();
		this.tog = {
			'100%' : '0%',
			'0%' : '100%'
		}
		this.$el[0].disable = false;
		this.$el[0].view = this;
		this.status = 1;
	},
	
	render : function() {
		this.conf = {
			left : this.options.l || this.$el.data('left'),
			right : this.options.r || this.$el.data('right')
		};
		var template = _.template($("#toggle_template").html(), this.conf);
		// Load the compiled HTML into the Backbone "el"
		this.$el.html(template);
		var w = 0;
		this.cont = $('.switch-wrapper', this.$el);
		$('.helper', this.$el).appendTo('body').each(function(index) {
			if ($(this).outerWidth() > w)
				w = $(this).outerWidth();
			$(this).remove();
		});
		var css = {};
		css.width = 15 + w + (this.options.bw || this.def.bw || $('.bar', this.$el).outerWidth());
		css.width = (css.width > this.def.minWidth ? css.width : this.def.minWidth) + 'px';
		
		this.options.h && (css.height = this.options.h);
		this.cont.css(css);
	},
	events : {
		"click .switch-wrapper" : "toggle"
	},
	def : {
		h : 26,
		minWidth : 80
	},
	changeHeight : function(h) {
		var css = {
			height : h + 'px',
			'font-size' : h / 2 + 'px',
		}
		var barWidth = (h - 4) / 2;
		$('.bar', this.cont).width(barWidth);
		this.cont.css(css);
	},

	toggle : function(event) {
		if(this.$el[0].disable)
			return false;
		var t = this.cont;
		var l = $('.opt', t);
		this.status = this.tog[l[0].style.width][0];
		this.clicking(this.sender, this.status);
		var h = $('.bar', t);
		var s = t.width() - h.width() - 4, e = 2;

		this.$el.attr({
			'active' : this.status
		});
		var self = this;
		l.eq(0).animate({
			width : this.tog[l[0].style.width],
		}, {
			duration : 100,
			step : function(w) {
				$('div', l[0])[0].style.marginLeft = ~~(5*w/100)+'px';
				$('div', l[1])[0].style.marginRight = ~~(5*(100-w)/100)+'px';
				// console.log(~~(5*w/100)+','+~~(5*(100-w)/100))
				l[1].style.width = (100 - w) + '%';
				h[0].style.left = ((s - e) * w / 100 + e) + 'px';
				self.animate(self.sender, w);
			},
			complete : function(event) {
				self.clicked(self.sender, self.status);
			}
		})

	},
	animate : function(sender, w) {
	},
	clicked : function(sender, status) {
	},
	clicking : function(sender, status) {
	},
	register : function(obj) {
		this.sender = obj;
		this.animate = obj[this.$el.attr("step")] || this.animate;
		this.clicked = obj[this.$el.attr("clicked")] || this.clicked;
		this.clicking = obj[this.$el.attr("clicking")] || this.clicking;
		return this;
	}
});

var ComboBox = Backbone.View.extend({
	tagName : 'div',

	initialize : function() {
		this.render();
		this.model.on('change:opts', this.update, this);

	},
	render : function() {
		var template = _.template($("#combo_template").html(), this.model.get('hint'), {variable: "hint"});
		this.$el.html(template);
		this.ui = $('select', this.$el).chosen({
			search_contains : true,
			no_results_text : "Not Found",
			allow_single_deselect : true
		});
	},
	update: function(){
		var html = "<option value=''></option>";
		var arr =  this.model.get('opts');
		for (var i in arr) {
			html += "<option>" + arr[i] + "</option>";
		}
		this.ui.html(html);
		this.ui.trigger("liszt:updated");		
	},
	change : function() {
	}
	// ,
	// register : function(obj) {
		// var t = this;
		// this.sender = obj;
		// this.change = this.sender[this.$el.attr("change")] || this.change;
		// this.ui.change(function(event, data) {
			// t.change(event, t.sender, data);
		// });
		// return this;
	// }
});
